<template>
  <el-dialog v-model="showAdjustRecord" width="1400px" style="height: 700px" center :show-close="false">
    <template #header>
      <div class="header">
        <title-view title="历史调整记录" />
        <el-icon size="16px" style="cursor: pointer" @click="handelCancel"><Close /></el-icon>
      </div>
    </template>
    <div class="history-container" v-loading="isLoading">
      <div class="customer-info">{{ tableDataInfo.customerName }}丨{{ tableDataInfo.residence }}</div>
      <el-table
        ref="clientManagerRef"
        :data="tableDataInfo.list"
        stripe
        style="width: 100%"
        border
        max-height="580px"
        :header-cell-style="{
          background: '#F2F6FC',
          color: '#909399',
          'font-weight': 400,
          'font-size': '14px',
          'border-right': '1px solid #E1E6ED',
          'text-align': 'center'
        }"
        :row-class-name="tableRowClassName"
      >
        <el-table-column prop="taskName" label="任务名称" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column label="负责人" align="center">
          <el-table-column label="调整前" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.beforeUserName !== row.afterUserName ? '#ff3333' : '' }">{{ row.beforeUserName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="调整后" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.beforeUserName !== row.afterUserName ? '#ff3333' : '' }">{{ row.afterUserName }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="工期" align="center">
          <el-table-column label="调整前" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.beforeDay !== row.afterDay ? '#ff3333' : '' }">{{ row.beforeDay }}天</span>
            </template>
          </el-table-column>
          <el-table-column label="调整后" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.beforeDay !== row.afterDay ? '#ff3333' : '' }">{{ row.afterDay }}天</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="计划开始时间" align="center">
          <el-table-column label="调整前" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.beforePlainStartDate !== row.beforePlainEndDate ? '#ff3333' : '' }">{{
                row.beforePlainStartDate
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="调整后" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.beforePlainStartDate !== row.beforePlainEndDate ? '#ff3333' : '' }">{{
                row.beforePlainEndDate
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column label="计划完成时间" align="center">
          <el-table-column label="调整前" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.afterPlainStartDate !== row.afterPlainEndDate ? '#ff3333' : '' }">{{
                row.afterPlainStartDate
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="调整后" show-overflow-tooltip>
            <template #default="{ row }">
              <span :style="{ color: row.afterPlainStartDate !== row.afterPlainEndDate ? '#ff3333' : '' }">{{
                row.afterPlainEndDate
              }}</span>
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column prop="createBy" label="调整人" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="alterDate" label="调整时间" show-overflow-tooltip align="center"></el-table-column>
      </el-table>
    </div>
  </el-dialog>
</template>

<script setup>
import { computed, ref, getCurrentInstance } from "vue";
import { useRoute } from "vue-router";
import { adjustHistoryList } from "@/apis/constructionPlan";
import { Close } from "@element-plus/icons-vue";
import { tableRowClassName } from "@/views/client/utils";

const route = useRoute();
const customerId = route.query.customerId;

const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});
const showAdjustRecord = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});
const emit = defineEmits(["update:modelValue"]);

const isLoading = ref(false);
const tableDataInfo = ref([]);
const getTableData = async () => {
  isLoading.value = true;
  const { data } = await adjustHistoryList(customerId);
  tableDataInfo.value = data;
  isLoading.value = false;
};

const handelCancel = () => {
  showAdjustRecord.value = false;
};

getTableData();
</script>

<style scoped lang="scss">
@use "@/assets/styles/mixin";
.header {
  display: flex;
  justify-content: space-between;
}
.history-container {
  .customer-info {
    color: #86909c;
    font-size: 14px;
    margin-bottom: 10px;
  }
}
:deep(.cell) {
  text-align: center;
}
</style>
